<extend name="Public/frame" />
<block name="content-box">

    <form class="form-horizontal tpx-ajaxsubmit" role="form" action="{:U(CONTROLLER_NAME.'/'.ACTION_NAME)}" method="post">

        <foreach name="data_domains" item="category" key="domain">
            <div class="form-group">
                <div class="col-sm-2">
                    <select class="form-control" name="app[]">
                        <foreach name="data_apps" key="app" item="label">
                            <option value="{$app|t_html}" <if condition="$category==$app">selected</if>>{$label|t_html}</option>
                        </foreach>
                    </select>
                </div>
                <div class="col-sm-8">
                    <input name="domain[]"
                           type="text"
                           class="form-control"
                           placeholder="输入需要绑定的域名，无需包含http://"
                           value="{$domain|t_html}"
                            />
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-danger btn-remove">删除</button>
                </div>
            </div>
        </foreach>

        <div class="form-group">
            <div class="col-sm-12">
                <button type="submit" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default btn-add">增加</button>
            </div>
        </div>

        <script type="text/html" id="domain_add_html">
            <div class="form-group">
                <div class="col-sm-2">
                    <select class="form-control" name="app[]">
                        <foreach name="data_apps" key="app" item="label">
                            <option value="{$app|t_html}">{$label|t_html}</option>
                        </foreach>
                    </select>
                </div>
                <div class="col-sm-8">
                    <input name="domain[]"
                           type="text"
                           class="form-control"
                           placeholder="输入需要绑定的域名，无需包含http://"
                           value=""
                            />
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-danger btn-remove">删除</button>
                </div>
            </div>
        </script>

        <script type="text/javascript">
            require(['jquery.extern'],function(){
                var add_html = $('#domain_add_html').html();
                $('.btn-add').on('click',function(){
                    var o = $(this).closest('.form-group');
                    $(add_html).insertBefore(o);
                });
                $(document).on('click','.btn-remove',function(){
                    $(this).closest('.form-group').remove();
                });
            });
        </script>

    </form>

</block>